<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calendar</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            min-width:100%;
            min-height: 768px;;
        }
        .calendar_wrap{
            width: 960px;
            margin: 0 auto;
            position: relative;
        }

        #date_input{
            width: 250px;
            height: 25px;
            margin: 20px 10px 10px;
            color: #e74f4d;
        }

        .calendar {
            width: 255px;
            height: 268px;
            border: 1px solid gray;
            margin-left: 10px;
            text-align: center;
            display: none;
            position: absolute;
            top: 60px;
        }
        .calendar .title {
            width: 100%;
            height: 22px;
            display: inline-block;
            margin-top: 3px;
            margin-bottom: 6px;
        }

        .year, .month{
            width: 40px;
            line-height: 22px;
            text-align: center;
        }

        .last_year, .last_month, .next_year, .next_month{
            background-color: #0094ff;
            color: #ffffff;
            display: inline-block;
            font: bold 12px/22px '宋体';
            cursor: pointer;
        }

        .last_year, .next_year{
            width: 20px;
            height: 100%;
        }
        .last_month, .next_month{
            width: 13px;
            height: 100%;

            margin: 0px 8px;
        }

        .calendar table{
            /*border-collapse: collapse;*/
            border: 1px solid #fff;
        }
        .calendar th, td{
            width: 36px;
            height: 29px;
            /*background-color: lightgray;*/
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
<div class="calendar_wrap">
    <input type="text" placeholder="点击选择日期" id="date_input">
    <div class="calendar"></div>
</div>
<script src="../huawei/jquery.min.js"></script>
<script>
    +function () {
        //元素节点
        var dateInput = document.getElementById('date_input');
        var calendar = document.getElementsByClassName('calendar').item(0);
        var isShown = false;


        //点击显示日历
        dateInput.addEventListener('click', function () {
            var date = new Date();
            dateInput.value = '';
            if(!isShown){
                calendar.style.display = 'block';
                showCalendar(calendar, date.getFullYear(), date.getMonth()+1);
            }else{
                calendar.style.display = 'none';
            }
            isShown = !isShown;

            //当前日期背景色
            var tdList = calendar.table.getElementsByTagName('td');
            for(var i = 0; i < tdList.length ; i++){
                if(tdList[i].innerHTML == new Date().getDate()){
                    tdList[i].style.color = 'red';
                    tdList[i].style.backgroundColor = 'lightgray';
                }
            }

            //改变年月按钮事件
            changeBtn();
        }, false);

        //生成日历
        function showCalendar(obj, year, month) {
            //当前月的1号日期
            var date = new Date();
            //当前月-》31 or 30 or 28 or 29
            var dayCount = 0;

            //生成日历表格
            if(!obj.table){
                
                //Title
                obj.titleEle = document.createElement('div');
                obj.titleEle.className = 'title';
                obj.appendChild(obj.titleEle);

                //必须这样加，不然后面，点击空白的时候隐藏日历
                //如果是通过innerHTML, 只是数据，span是没有父元素的
                //没有父元素无法判断是不是Calendar的子元素，就会当作空白区域
                //点击切换时间后，会隐藏日历
                var span_0 = document.createElement('span');
                span_0.className = 'last_year';
                span_0.innerHTML = '<<';

                var span_1 = document.createElement('span');
                span_1.className = 'last_month';
                span_1.innerHTML = '<';

                var span_2 = document.createElement('span');
                span_2.className = 'next_month';
                span_2.innerHTML = '>';

                var span_3 = document.createElement('span');
                span_3.className = 'next_year';
                span_3.innerHTML = '>>';

                var input_year = document.createElement('input');
                input_year.className = 'year';
                var input_month = document.createElement('input');
                input_month.className = 'month';

                var span_temp_year = document.createElement('span');
                span_temp_year.innerHTML = ' 年 ';
                var span_temp_month = document.createElement('span');
                span_temp_month.innerHTML = ' 月 ';

                obj.titleEle.appendChild(span_0);
                obj.titleEle.appendChild(span_1);
                obj.titleEle.appendChild(input_year);
                obj.titleEle.appendChild(span_temp_year);
                obj.titleEle.appendChild(input_month);
                obj.titleEle.appendChild(span_temp_month);
                obj.titleEle.appendChild(span_2);
                obj.titleEle.appendChild(span_3);

                
                //Table
                var table = document.createElement('table');
                obj.appendChild(table);
                obj.table = table;

                //tHead
                var thead = document.createElement('tHead');
                var thead_tr = document.createElement('tr');
                var days = ['日', '一', '二', '三', '四', '五', '六'];
                for(var i = 0; i < 7; i++){
                    var th = document.createElement('th');
                    th.innerHTML = days[i];
                    thead_tr.appendChild(th);
                }
                thead.appendChild(thead_tr);
                table.appendChild(thead);

                //tBody
                var tbody = document.createElement('tBody');
                table.appendChild(tbody);

                for(var m = 0; m < 6; m++){
                    var tr = document.createElement('tr');
                    for(var j = 0; j < 7; j++){
                        var td = document.createElement('td');
                        tr.appendChild(td);
                        td.innerHTML = '';
                    }
                    tbody.appendChild(tr);
                }
            }

            obj.titleEle.getElementsByTagName('input')[0].value = year;
            obj.titleEle.getElementsByTagName('input')[1].value = month;

            //循环生成日期
            date.setFullYear(year);
            date.setMonth(month-1);
            date.setDate(1);

            function isLeapYear(year){
                if(year%4==0 && year%100!=0){
                    return true;
                }
                else{
                    if(year%400==0){
                        return true;
                    }
                    else{
                        return false;
                    }
                }
            }

            //计算dayCount
            if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
                dayCount = 31;
            }
            else if(month==4 || month==6 || month==9 || month==11){
                dayCount = 30;
            }
            else if(month==2 && isLeapYear(year)){
                dayCount = 29;
            }
            else{
                dayCount = 28;
            }

            //填充日期
            var tdList = obj.table.getElementsByTagName('td');
            for(var k = 0; k<tdList.length; k++){
                tdList[k].innerHTML = '';
            }
            switch (date.getDay()){
                case 0:
                    for(var n = 0; n < dayCount; n++){
                        tdList[n].innerHTML = n+1;
                    }
                    break;
                case 1:
                    for(var n = 0; n < dayCount; n++){
                        tdList[n+1].innerHTML = n+1;
                    }
                    break;
                case 2:
                    for(var n = 0; n < dayCount; n++){
                        tdList[n+2].innerHTML = n+1;
                    }
                    break;
                case 3:
                    for(var n = 0; n < dayCount; n++){
                        tdList[n+3].innerHTML = n+1;
                    }
                    break;
                case 4:
                    for(var n = 0; n < dayCount; n++){
                        tdList[n+4].innerHTML = n+1;
                    }
                    break;
                case 5:
                    for(var n = 0; n < dayCount; n++){
                        tdList[n+5].innerHTML = n+1;
                    }
                    break;
                case 6:
                    for(var n = 0; n < dayCount; n++){
                        tdList[n+6].innerHTML = n+1;
                    }
                    break;
            }
        }

        //改变日历时间函数
        function changeBtn() {

            var spans = calendar.getElementsByTagName('span');
            var nowYear = document.getElementsByClassName('year').item(0).value;
            var nowMonth = document.getElementsByClassName('month').item(0).value;
            //上一年
            spans[0].onclick = function () {
                showCalendar(calendar, --nowYear, nowMonth);
                changeBtn();
            };
            //上一月
            spans[1].onclick = function () {
                if(nowMonth == '1'){
                    nowMonth = '12';
                    nowYear = --nowYear;
                }else {
                    nowMonth = --nowMonth;
                }
                showCalendar(calendar, nowYear, nowMonth);
                changeBtn();
            };
            //下一月
            spans[4].onclick = function () {
                if(nowMonth == '12'){
                    nowMonth = '1';
                    nowYear = ++nowYear;
                }else{
                    nowMonth = ++nowMonth;
                }
                showCalendar(calendar, nowYear, nowMonth);
                changeBtn();
            };
            //下一年
            spans[5].onclick = function (event) {
                showCalendar(calendar, ++nowYear, nowMonth);
                changeBtn();
            }

        }


/***************************************事件代理部分*************************************************************/

        //移动到日期时，显示移动到的日期的边框
        document.addEventListener('mousemove', function (event) {
            if(event.target.tagName.toUpperCase() == 'TD' && event.target.innerHTML !==''){
                event.target.style.border = '1px solid red';
                event.target.style.cursor = 'pointer';
            }
        });

        document.addEventListener('mouseout', function (event) {
            if(event.target.tagName.toUpperCase() == 'TD'){
                event.target.style.border = '1px solid white';
            }
        });

//        $(document).mouseup(function(e){
//                var _con = $(' 目标区域 ');   // 设置目标区域
//                if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
//                    some code...   // 功能代码
//                }
//            });
//            /* Mark 1 的原理：
//             判断点击事件发生在区域外的条件是：
//             1. 点击事件的对象不是目标区域本身
//             2. 事件对象同时也不是目标区域的子元素

        //点击空白区域隐藏日历
        document.body.onclick = function (event) {
            var view = $('.calendar');
            if(isShown && !view.is(event.target) && view.has($(event.target)).length == 0 && event.target.tagName != 'INPUT'){
                calendar.style.display = 'none';
                isShown = !isShown;
            }
        };

        //点击日期，返回到输入框中
        document.addEventListener('click', function (event) {
            if(event.target.tagName.toUpperCase() == 'TD' && event.target.innerHTML !== ''){

                var target = event.target;
                var chooseDate = new Date();
                dateInput.value = chooseDate.getFullYear() +'-'+ (chooseDate.getMonth()+1) +'-'+target.innerHTML;
                calendar.style.display = "none";
                isShown = !isShown;
            }
        });


    }();
</script>
</body>
</html>